<template>
	<view>
		<van-search
			v-model="searchVal"
			use-action-slot
			@change="onChange"
			@search="onSearch"
			@clear="onClear"
			@input="onSearch"
			focus="true"
			shape="round"
			custom-class="my-search"
			placeholder="请输入搜索关键词"
		><view slot="action" @click="onSearch">搜索</view>
		</van-search>
		<view class="SearchList">
			<template v-if="!nodata">
				<view
					:class="item.type === 0 ? 'SearchItem actor' : item.type === 1 ? 'SearchItem teleplay' : 'SearchItem flim'"  
					v-for="(item,index) in resList" 
					:data-index ='index'
					:data-id="item.id"
					:data-name="item.name"
					:data-type="item.type"
					:key="index" 
					@click="goToDetail"
				>
					<van-icon size="40rpx" class="icon" :name="item.type === 0 ? 'https://cdn.xtde.cn/wxapp/xtde/img-icons/list-icon0.png' : item.type === 1 ? 'https://cdn.xtde.cn/wxapp/xtde/img-icons/list-icon2.png' : 'https://cdn.xtde.cn/wxapp/xtde/img-icons/list-icon1.png'" />
					<view class="item-name">
						<view class="mian-name">
							<text v-for="(mc, key) in item.mc" :key="key"
								:class="mc === searchVal ? 'hightLigh' : ''"
							>{{ mc }}</text>
						</view>
						<view class="sub-name">{{item.desc}}</view>
					</view>
					
					<view class="alias_mc">{{item.tip}}</view>
				</view>
			</template>
			<template v-else>
				<view class="nodata">
					<view>未搜索到相关结果</view>
					<view>换一个关键词试试</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	const api = require('../../../wxapi/config.js');
	const getInf = (str, key) => str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%');
	export default {
		data() {
			return {
				isfocus: false,
				searchVal: '',
				nodata: false,
				resList: []
			}
		},
		onLoad: function (options) {
			this.isfocus = true;
		},
		methods: {
			onChange(e) {
				this.searchVal = e.detail;
				if (e.detail === '') {
					this.resList = [];
					this.searchVal = '';
					this.nodata = false;
				}
			},
			onSearch(event) {
				var datas = []
				this.resList = [];
				if (this.searchVal) {
					api.getSearchList({
						mc: this.searchVal
					}).then((res) => {
						if (res.data.length !== 0) {
							for (let i in res.data) {
								datas.push({
									mc: getInf(res.data[i].name, this.searchVal),
									type: res.data[i].type,
									id: res.data[i].id,
									name: res.data[i].name,
									desc: res.data[i].desc,
									tip: res.data[i].tip
								})
							}
							this.resList = datas;
							if (this.nodata) {
								this.nodata = false;
							}
						} else {
							this.nodata = !this.nodata;
						}
					})
				}
			},
			onClear() {
				this.resList = [];
				this.nodata = false;
			},
			goToDetail (e) {
				if (e.currentTarget.dataset.type === 0) {
					uni.navigateTo({
						url: '/pages/search/search-detail/actor-detail/actor-detail?id=' + e.currentTarget.dataset.id + '&name=' + e.currentTarget.dataset.name + '&type=' + e.currentTarget.dataset.type
					})
				} 
				if (e.currentTarget.dataset.type === 1) {
					uni.navigateTo({
						url: '/pages/search/search-detail/telepaly-detail/telepaly-detail?id=' + e.currentTarget.dataset.id + '&name=' + e.currentTarget.dataset.name + '&type=' + e.currentTarget.dataset.type
					})
				}
				if (e.currentTarget.dataset.type === 2) {
					uni.navigateTo({
						url: '/pages/search/search-detail/film-detail/film-detail?id=' + e.currentTarget.dataset.id + '&name=' + e.currentTarget.dataset.name + '&type=' + e.currentTarget.dataset.type
					})
				}
			},
		}
	}
</script>

<style scoped>
	@import url("vant/lib/index.css");
	.my-search .van-cell,
	.my-search .van-field__input,
	.my-search .van-cell__left-icon-wrap{
		line-height:40px;
		height:40px;
		font-size: 15px;
	}
	.my-search .van-cell {
		padding:0 15px 0 0!important;
	}
	.SearchItem {
		padding: 15rpx 20px;
		font-size:30rpx;
		/* height:60rpx;
		line-height:60rpx; */
		border-top:1px solid #f0f0f0;
		position: relative;
	}
	.item-name{
		padding-left:65rpx;
	}
	.mian-name{
		width: 75%;
		overflow:hidden;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:1;
	}
	
	.SearchItem.flim .hightLigh {
		color: #0e86f5;
	}
	.SearchItem.teleplay .hightLigh {
		color: #fe862e;
	}
	.SearchItem.actor .hightLigh {
		color: #b547ee;
	}
	.SearchItem .type{
		position:absolute;
		top:15rpx;
		right:25rpx;
		background:#f6f6f6;
		padding:0 25rpx;
		height:60rpx;
		color:#848484;
		border-radius:20rpx;
		line-height:60rpx;
		font-size: 24rpx;
	}
	.sub-name{
		width: 75%;
		font-size:22rpx;
		color:#848484;
		line-height: 1.5;
		overflow:hidden;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:1;
	}
	.SearchItem .icon{ 
		width: 45rpx;
		height: 45rpx;
		position:absolute;
		top:50%;
		left: 16px;
		transform: translate3d(0,-50%,0);
	}
	.SearchItem .alias_mc{
		width: 21%;
		text-align: right;
		position:absolute;
		top:50%;
		transform: translate3d(0,-50%,0);
		right:25rpx;
		padding:0 25rpx;
		height:60rpx;
		color:#848484;
		line-height:60rpx;
		font-size: 24rpx;
		overflow:hidden;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:1;
	
	}
	.SearchItem:last-child{
		border-bottom:1px solid #f0f0f0;
	}
</style>
